<script setup>
import {onBeforeMount, reactive, ref} from "vue";
import {getMenuList, getServerInfo} from "@/api/api.js";
import BlackMenu from "@/components/menu/BlackMenu.vue";
import router from "@/router/router.js";
import {getLocalStr, isEmpty} from "@/utils/common.ts";
import {ElMessage, ElMessageBox} from "element-plus";

const components = import.meta.glob('@/views/**/*.vue', {eager: false});
let menuList = reactive([
  {
    name: '首页',
    path: '/homepage',
  }
]);
let server = reactive({
  status: '',
  count: 0,
  browser: ''
})
let activeMenu = ref(getLocalStr('activeMenu'));
// 添加响应式数据用于控制移动端显示
const isMobile = ref(false);

// 检测是否为移动端设备
const checkIsMobile = () => {
  const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
  isMobile.value = mobileRegex.test(navigator.userAgent);
};

const onClickMenu = (path) => {
  activeMenu.value = path;
}
// 获取浏览器名称
const getBrowserName = () => {
  let info = navigator.userAgent.toLowerCase()
  if (info.indexOf("firefox") > 0) {
    server.browser = "firefox"
  } else if (info.indexOf("chrome")) {
    server.browser = "chrome"
  } else if (info.indexOf("msie")) {
    server.browser = "ie"
  } else {
    server.browser = "other"
  }
};
const getServerStatus = () => {
  getServerInfo().then(res => {
    server.status = res.status
    server.count = res.count;
  }).catch(e => {
    server.status = "暂停运行"
    server.count = 0;
  })
}
// 构造路由
const buildRoutes = (list) => {
  let routes = [];
  for (let menu of list) {
    if (menu.name === '首页') {
      continue;
    }
    let routeInfo = {
      name: menu.name,
      path: menu.path,
    };
    if (menu.children) {
      routeInfo.children = buildRoutes(menu.children);
    } else {
      routeInfo.component = getComponent(menu.component);
    }
    routes.push(routeInfo)
  }
  return routes;
}
const getComponent = (path) => {
  return components[`/src/views/${path}.vue`];
}
const joker = (evt) => {
  ElMessageBox.confirm(
      '确认要回到顶部吗',
      '提示',
      {
        confirmButtonText: '那必须的',
        cancelButtonText: '算了算了',
        type: 'success',
        center: true,
      }
  ).then(() => {
    ElMessage({
      type: 'success',
      message: '来时候好好地,回不去了~ 没想到吧我是个没用的组件',
    })
  }).catch(() => {
    ElMessage({
      type: 'error',
      message: '这就放弃了?真可惜',
    })
  })
}
onBeforeMount(() => {
  getMenuList().then(res => {
    res.forEach(menu => menuList.push(menu))
    buildRoutes(menuList).forEach(route => {
      router.addRoute(route);
    })
    if (isEmpty(activeMenu.value)) {
      activeMenu.value = '/homepage';
    }
    router.push(activeMenu.value)
  })
  getBrowserName();
  getServerStatus();
  checkIsMobile();
  // 监听窗口大小变化
  window.addEventListener('resize', checkIsMobile);
})
</script>

<template>
  <el-header id="header">
    <!-- 头部菜单 -->
    <black-menu id="menu" :active-menu="activeMenu" :menu-list="menuList" @click-menu="onClickMenu"/>
  </el-header>
  <el-container id="container">
    <!-- 将滚动条撑开 -->
    <div style="height: 100%">
      <!-- 路由视窗 -->
      <router-view/>
      <el-backtop :right="100" :bottom="100" :visibility-height="0" @click="joker"/>
    </div>
  </el-container>
  <el-footer id="footer">
    <!-- 底部服务器信息 -->
    <el-container v-if="!isMobile" id="serverInfo">
      <el-main style="text-align:center;height: 1.5em;overflow: hidden;padding: 0">
        <el-divider class="ver-divider" direction="vertical"></el-divider>
        <span class="title">服务器状态</span>
        <el-divider class="ver-divider" direction="vertical"></el-divider>
        <span class="title">{{ server.status }}</span>
        <el-divider class="ver-divider" direction="vertical"></el-divider>
        <span class="title">账号数</span>
        <el-divider class="ver-divider" direction="vertical"></el-divider>
        <span class="title">{{ server.count }}</span>
        <el-divider class="ver-divider" direction="vertical"></el-divider>
        <span class="title">浏览器</span>
        <el-divider class="ver-divider" direction="vertical"></el-divider>
        <span class="title">{{ server.browser }}</span>
        <el-divider class="ver-divider" direction="vertical"></el-divider>
      </el-main>
      <el-footer style="height: 1.5em !important;padding: 0">
        <!-- 备案号 -->
        <div class="copyright">
          <el-divider></el-divider>
          <span style="text-align: center;display: block">Copyright black_ovo© 2023-2024 冀ICP备2023013017号</span>
        </div>
      </el-footer>
    </el-container>
    <!-- 移动端只显示备案号 -->
    <el-container v-else id="mobileCopyright">
      <el-footer style="height: 1.5em !important;padding: 0">
        <!-- 备案号 -->
        <div class="copyright">
          <el-divider></el-divider>
          <span style="text-align: center;display: block">Copyright black_ovo© 2023-2024 冀ICP备2023013017号</span>
        </div>
      </el-footer>
    </el-container>
  </el-footer>
</template>

<style scoped>
#header {
  padding: 0;
  width: 100%;
  background-color: #fff;
}

#container {
  padding: 0;
  width: 100%;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
}

#footer {
  padding: 0;
  width: 100%;
  height: 3.5em;
  background-image: url("@/assets/footer_background.png");
  background-size: cover;
}

#menu {
  width: 60%;
  margin: auto;
  display: flex;
  justify-content: center;
}

/* 移动端适配 */
@media (max-width: 768px) {
  #menu {
    width: 95%;
  }

  #footer {
    padding: 0;
    width: 95%;
    height: 3.5em;
    background-image: url("@/assets/footer_background.png");
    background-size: cover;
  }
  
  .el-backtop {
    right: 20px !important;
    bottom: 20px !important;
  }
  
  #mobileCopyright {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  #menu {
    width: 98%;
  }

  #footer {
    padding: 0;
    width: 98%;
    height: 3.5em;
    background-image: url("@/assets/footer_background.png");
    background-size: cover;
  }
  
  #mobileCopyright {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
